﻿<h1>Store</h1>
<ul data-template="storeFull-template" data-bind="source: store">
</ul>

<script type="text/x-kendo-template" id="storeFull-template">
    <div class="store">
    <strong>Store Name: </strong>
    <span>#= name # </span>
    <br />
    <strong>Store City: </strong>
    <span>#= city # </span>
    <br />
    </div>
    <div class= "books-details">
    # for (var i = 0; i < books.length; i++) { #
        <div>
        <strong>Title: </strong>
        <span>#= books[i].title # </span>
    <br />
        <strong>Author: </strong>
        <span>#= books[i].author # </span>
    <br />
        <strong>Genre: </strong>
        <span>#= books[i].genre # </span>
    <br />
        <strong>Pages: </strong>
        <span>#= books[i].pages # </span>
    <br />
        <strong>RentCost: $</strong>
        <span>#= books[i].rentCost # </span>
    # if(books[i].isAvailable == "True") { #
        <button data-bind="click: rentBook" data-bookId="#= books[i].id #">Rent the book</button>
    # } #
        </div>
    # } #
    </div>
</script>